<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Welcome</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.prod.js"></script>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            font-family: 'Arial', sans-serif;
        }
        .dark-welcome-container {
            position: relative;
            height: 100vh;
            background: #0a0a0a;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .welcome-text {
            font-size: 3.5rem;
            font-weight: bold;
            color: transparent;
            background: linear-gradient(90deg, #8a2be2, #00bfff, #ff1493);
            background-size: 200% auto;
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow: 0 0 10px rgba(138, 43, 226, 0.5);
            position: relative;
            z-index: 2;
            animation: shine 3s linear infinite;
        }
        .char {
            display: inline-block;
            opacity: 0;
            transform: translateY(20px);
            animation: fadeInUp 0.5s forwards;
        }
        .particles-container {
            position: absolute;
            width: 100%;
            height: 100%;
            z-index: 1;
        }
        .particle {
            position: absolute;
            background: linear-gradient(135deg, #8a2be2, #00bfff);
            border-radius: 50%;
            animation: float linear infinite;
        }
        .glow-effect {
            position: absolute;
            width: 300px;
            height: 300px;
            background: radial-gradient(circle, rgba(138, 43, 226, 0.2) 0%, rgba(0, 0, 0, 0) 70%);
            filter: blur(30px);
            animation: pulse 4s ease-in-out infinite;
        }
        @keyframes fadeInUp {
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            100% { transform: translateY(-100vh) rotate(360deg); }
        }
        @keyframes shine {
            to { background-position: 200% center; }
        }
        @keyframes pulse {
            0%, 100% { transform: scale(1); opacity: 0.5; }
            50% { transform: scale(1.2); opacity: 0.8; }
        }
        .dissolve-effect {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #0a0a0a;
            opacity: 0;
            z-index: 999;
            pointer-events: none;
            animation: dissolve 5s forwards;
        }
        @keyframes dissolve {
            0% { opacity: 0; }
            90% { opacity: 0; }
            100% { opacity: 1; }
        }
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <div class="dark-welcome-container">
            <div class="particles-container" ref="particlesContainer">
                <div v-for="(particle, index) in particles" 
                     :key="index" 
                     class="particle" 
                     :style="particle.style">
                </div>
            </div>
            <div class="welcome-text">
                <span v-for="(char, index) in welcomeText" 
                      :key="index" 
                      class="char" 
                      :style="{ animationDelay: `${index * 0.1}s` }">
                    {{ char }}
                </span>
            </div>
            <div class="glow-effect"></div>
        </div>
    </div>

    <script>
        const { createApp, ref, onMounted, reactive } = Vue;
        
        createApp({
            setup() {
                const welcomeText = ref('Welcome To Quant World！');
                const particles = reactive([]);
                const particlesContainer = ref(null);
                
                onMounted(() => {
                    // 创建粒子
                    const particleCount = 30;
                    
                    for (let i = 0; i < particleCount; i++) {
                        particles.push({
                            style: {
                                left: `${Math.random() * 100}%`,
                                top: `${Math.random() * 100}%`,
                                width: `${Math.random() * 5 + 2}px`,
                                height: `${Math.random() * 5 + 2}px`,
                                opacity: Math.random() * 0.5 + 0.1,
                                animationDuration: `${Math.random() * 10 + 5}s`,
                                animationDelay: `${Math.random() * 5}s`
                            }
                        });
                    }
                    
                    // 设置页面跳转
                    setTimeout(() => {
                        document.documentElement.classList.add('is-transitioning');
                        setTimeout(() => {
                            // 使用window.location.replace避免中间件检查
                            window.location.replace('/blank');
                        }, 800);
                    }, 4000);
                });
                
                return {
                    welcomeText,
                    particles,
                    particlesContainer
                };
            }
        }).mount('#app');
    </script>
</body>
</html>